<template>
  <div class="news-section">
    <div class="section-header">
      <div class="line-decoration"></div>
      <h2 class="section-title">{{ title }}</h2>
      <div class="line-decoration"></div>
    </div>
    <a v-if="moreLink" :href="`${moreLink}?id=${newsItems[0]?.category_id}`" class="read-more-link">{{ moreLinkText }}</a>
    <div class="news-carousel">
      <Swiper
        :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
        :slides-per-view="slidesPerView"
        :space-between="30"
        :loop="loop"
        :pagination="pagination ? { clickable: true, el: '.news-pagination' } : false"
        :navigation="{ nextEl: '.news-button-next', prevEl: '.news-button-prev' }"
        :autoplay="autoplay ? { delay: 5000, disableOnInteraction: false } : false"
        @resize="updateSlidesPerView"
      >
        <SwiperSlide v-for="(post, index) in newsItems" :key="'news-' + index">
          <div class="news-card" @click="goDetail(post.category_id, post.id)">
            <div class="news-image">
              <a :href="`${moreLink}?id=${post.category_id}&childId=${post.id}`"><img :src="post.image" :alt="post.title"></a>
              <!-- <div v-if="showLogo" class="news-logo">
                <svg class="logo-image" width="150" height="50" viewBox="0 0 150 50" fill="white">
                  <path d="M17.5,25c0-7.5,8.5-13.6,18.9-13.6c10.4,0,18.9,6.1,18.9,13.6c0,7.5-8.5,13.6-18.9,13.6C26,38.6,17.5,32.5,17.5,25z M36.4,33.8c5.5,0,10-4,10-8.8c0-4.9-4.5-8.8-10-8.8c-5.5,0-10,4-10,8.8C26.4,29.9,30.9,33.8,36.4,33.8z" />
                  <path d="M57.9,13.4h7.1l17.8,17.2V13.4h5.5v22.7h-7.1L63.4,18.8v17.2h-5.5V13.4z" />
                  <path d="M92.9,13.4h5.5v18.2h11.4v4.5H92.9V13.4z" />
                  <path d="M112.6,13.4h5.5v18.2h11.4v4.5h-16.9V13.4z" />
                  <path d="M132.4,13.4h5.5v22.7h-5.5V13.4z" />
                  <path d="M140.7,13.4h4.5l-0.5,22.7h-3.5L140.7,13.4z" />
                </svg>
              </div> -->
            </div>
            <div class="news-content">
              <h3 class="news-title">{{ post.title }}</h3>
              <p class="news-date">{{ post.date }}</p>
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
      <div v-if="pagination" class="news-pagination"></div>
      <div class="news-navigation">
        <div class="news-button-prev">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div class="news-button-next">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, defineProps, defineExpose } from 'vue';
// 导入Swiper相关组件和模块
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
// @ts-ignore
import 'swiper/css';
// @ts-ignore
import 'swiper/css/pagination';
// @ts-ignore
import 'swiper/css/navigation';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
// 定义组件接口
interface NewsItem {
  title: string;
  date: string;
  image: string;
}

// 定义props
const props = defineProps({
  title: {
    type: String,
    default: 'NEWS'
  },
  newsItems: {
    type: Array as () => NewsItem[],
    required: true
  },
  moreLink: {
    type: String,
    default: '#'
  },
  moreLinkText: {
    type: String,
    default: 'Read more'
  },
  showLogo: {
    type: Boolean,
    default: true
  },
  autoplay: {
    type: Boolean,
    default: false
  },
  loop: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Boolean,
    default: false
  },
  maxDesktopSlides: {
    type: Number,
    default: 2
  }
});

// Swiper模块
const SwiperAutoplay = Autoplay;
const SwiperPagination = Pagination;
const SwiperNavigation = Navigation;

// 响应式slide数量
const slidesPerView = ref(props.maxDesktopSlides);

// 更新每个视图显示的slide数量
const updateSlidesPerView = () => {
  if (window.innerWidth <= 768) {
    slidesPerView.value = 1;
  } else {
    slidesPerView.value = props.maxDesktopSlides;
  }
};

// 监听窗口大小变化
onMounted(() => {
  updateSlidesPerView();
  window.addEventListener('resize', updateSlidesPerView);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateSlidesPerView);
});

// 暴露一些可能需要的方法
defineExpose({
  updateSlidesPerView
});

// 使用defineOptions代替defineComponent来提供组件名称
defineOptions({
  name: 'NewsCarousel'
});
// 跳转博客详情
const goDetail = (category_id: string, id: string) =>{
  router.push({
    path: '/blog-left-menu',
    query: {
      id: category_id,
      childId: id
    }
  });
}
</script>

<style lang="scss" scoped>
.news-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 50px;
  position: relative;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 55px;
  position: relative;
}

.section-title {
  font-size: 24px;
  font-weight: 500;
  color: #232323;
  text-transform: uppercase;
  margin: 0 20px;
  letter-spacing: 2px;
  text-align: center;
  min-width: 180px;
}

.line-decoration {
  flex: 1;
  height: 1px;
  background-color: #232323;
  max-width: 450px;
}

.read-more-link {
  position: absolute;
  top: 40px;
  right: 0px;
  color: #232323;
  text-decoration: none;
  font-size: 14px;
  text-decoration: underline;
}

.news-carousel {
  position: relative;
  margin: 30px 0;
  
  :deep(.swiper) {
    width: 100%;
    padding-bottom: 50px;
  }
  
  :deep(.swiper-slide) {
    height: auto;
    display: flex;
    justify-content: center;
  }
  
  .news-card {
    cursor: pointer;
    width: 100%;
    
    &:hover .news-image img {
      transform: scale(1.02);
    }
  }
  
  .news-image {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    margin-bottom: 15px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    @media (max-width: 768px) {
      height: 300px;
    }
    
    @media (max-width: 480px) {
      height: 250px;
    }
  }
  
  .news-logo {
    position: absolute;
    bottom: 20px;
    left: 20px;
    
    .logo-image {
      height: 35px;
      width: auto;
      filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3));
    }
  }
  
  .news-content {
    .news-title {
      font-size: 18px;
      color: #232323;
      text-transform: uppercase;
      margin: 0 0 10px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.5px;
    }
    
    .news-date {
      font-size: 14px;
      color: #767676;
      margin: 0;
      letter-spacing: 0.5px;
    }
  }
}

.news-navigation {
  .news-button-prev,
  .news-button-next {
    position: absolute;
    top: 36%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    color: #232323;
    
    &:hover {
      background: #f5f5f5;
    }
    
    @media (max-width: 768px) {
      width: 30px;
      height: 30px;
      svg {
        width: 18px;
        height: 18px;
      }
    }
  }
  
  .news-button-prev {
    left: -20px;
    
    @media (max-width: 768px) {
      left: 0;
    }
  }
  
  .news-button-next {
    right: -20px;
    
    @media (max-width: 768px) {
      right: 0;
    }
  }
}

:deep(.news-pagination) {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    opacity: 1;
    margin: 0 5px;
    
    &-active {
      background: #232323;
    }
  }
}

@media (max-width: 768px) {
  .section-header {
    margin-bottom: 50px;
  }
  
  .read-more-link {
    top: 30px;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 20px;
  }
  
  .line-decoration {
    max-width: 80px;
  }
  
  .news-content .news-title {
    font-size: 18px;
  }
}
</style> 